<template>
  <div>
    <div class="top_parent">
      <img src="../../assets/image/column/cosult_banner.png" style="width:100%" alt />
      <div class="bread">
        <p v-if="$route.query.orderId == 1">
          <router-link to="/">首页</router-link>》概述 》舟博简介
        </p>
        <p v-if="$route.query.orderId == 2">
          <router-link to="/">首页</router-link>》概述 》领导介绍
        </p>
        <p v-if="$route.query.orderId == 3">
          <router-link to="/">首页</router-link>》概述 》部门设置
        </p>
      </div>
    </div>
    <div class="bg_person">
      <div class="content gwgk">
        <div class="left">
          <ul>
            <li @click="tiaoz1(index + 1)" v-for="(item, index) of nav" :key="index">
              <!-- <router-link :to="zhiyuanzhezhijia"> -->
              <span :class="{ blue: $route.query.orderId == index + 1 }">
                {{
                item.name
                }}
              </span>
              <!-- </router-link> -->
            </li>
          </ul>
        </div>

        <div class="right">
          <router-view></router-view>
        </div>
        <div></div>
      </div>
    </div>
    <foot2 class="dibu"></foot2>
  </div>
</template>
<script>
import foot2 from "../../components/foot2";
export default {
  data() {
    return {
      choose: "",

      nav: [
        {
          name: "舟博简介",
        },
        {
          name: "领导介绍",
        },
        {
          name: "部门设置",
        },
      ],
      index: 1,
    };
  },
  components: {
    foot2: foot2,
  },
  methods: {
    tiaoz1(i) {
      this.$router
        .push({
          path: "/lindaojieshao/lindaojieshao2/:id",
          query: { orderId: i, bool: true },
        })
        .catch((err) => {
          err;
        });
    },
  },
};
</script>
<style scoped>
a {
  text-decoration: none;
  color: #6e6e6e;
}
.top_parent {
  position: relative;
}
.top_parent .bread {
  max-width: 1200px;
  margin: auto;
}
.top_parent p {
  position: absolute;
  bottom: 20px;
  color: #6e6e6e;
}

.bg_person {
  width: 100%;
  min-height: 600px;
  background: url("../../assets/image/show_bg2.png");
  background-repeat: no-repeat;
}
.gwgk.content {
  display: flex;

  color: #4e4b4b;
  width: 1200px;
  font-size: 24px;
  margin: auto;
  padding-top: 44px;
  box-sizing: border-box;
}
.gwgk .title {
  font-size: 24px;
  border-bottom: 2px solid rgb(107, 128, 173);
  color: #4e69a1;
}
.gwgk li {
  list-style: none;
}
.gwgk ul,
li,
p {
  padding: 0px;
  margin: 0px;
}
.gwgk .left {
  width: 195px;
  background: url("../../assets/image/left_nav.png") no-repeat;
}
.gwgk .left ul {
  padding: 30px;
  box-sizing: border-box;
}
.gwgk .left ul li {
  font-size: 18px;
  color: #6e6e6e;
  width: 140px;
  cursor: pointer;
  box-sizing: border-box;
}
.gwgk .left ul li:first-child {
  padding-top: 0px;
  padding-bottom: 16px;
}

.gwgk .left ul li span {
  display: inline-block;
  margin-left: 22px;
}
.gwgk .left ul li:not(:last-child) {
  border-bottom: 2px solid #9e9e9e;
  margin-bottom: 20px;
  padding-bottom: 16px;
}
.gwgk .right {
  width: 940px;
  margin-bottom: 85px;
  padding: 0 50px 0;
  box-sizing: border-box;
}

.gwgk .blue {
  color: #003567;
}
</style>
